<template>
  <div>
  <!-- <x-header :left-options="{showBack: true}" title="叮咚社区"></x-header> -->
    <!-- <div></div> -->
    <scroller lock-x scrollbar-y :lock-y="textactive"  use-pullup :pullup-config="pullupConfig2"   ref="demo2" @on-pullup-loading="load2" :height="swcheig">

      <div class="box2" >
        <div class="listbox">

          <div class="headerimg">
            <img :src="headerimgs">
          </div>

          <div class="listcontents">
            <div class="username">
              <h1 class="h1title" v-text="h1title">深夜食堂的猫</h1>
              <span class="gz"><span class="box">+ 关注</span></span>
            </div>
            <div class="zzname">By:少年</div>
            <div class="listcontens" v-text="textconte">
            </div>
            <div class="bottomtip">
                <div class="h2titl">评论</div>
                <div class="contentitil"><span :class="userpl?'active':''" @click="userpl=true">热门</span>/<span :class="!userpl?'active':''" @click="userpl=false">最新</span></div>
                <div class="userplconten" >

                    <div class="plbox" v-for="items in userpllist" :key="items.id">
                        <div class="topconten">
                          <div class="logoimg"><img :src="items.imgurl"></div>
                          <div class="namesf">
                              <div v-text="items.name">--</div>
                              <div class="times" v-text="items.times">---</div>
                              <div class="contens" v-text="items.contens">---</div>
                          </div>
                        </div>
                    </div>

                </div>
            </div>
          </div>
        </div>

        <!-- <p v-for="i in n2">占位 {{i}}</p> -->
      </div>
    </scroller>

       <div :class="textactive?'bottomuserplactive':'bottomuserpl'">
         <div class="disflexbox" v-if="textactive">
           <div class="exit">
              <span @click="textactive =false">取消</span>
           </div>
           <div class="sumbits">
             <span>发表</span>
           </div>
         </div>
          <x-textarea :max="500"  placeholder="写评论...."   @on-focus="onsblur" @on-blur="textactive=false" :cols="30" :show-counter="false"></x-textarea>
       </div>

       <div class="fixedbox" v-show="textactive" @click="textactive =false">
       </div>

  </div>
</template>

<script>
import {  Scroller,XHeader,XTextarea} from 'vux'
// import Data from '../details/datas'

export default {
  components: {
    Scroller,
    XHeader,
    XTextarea,
    // Data
  },
  methods: {
    load2 () {
      setTimeout(() => {
        this.n2 += 10
        setTimeout(() => {
          this.$refs.demo2.donePullup()
        }, 100)
        if (this.n2 === 70) { // unload plugin
          setTimeout(() => {
            this.$refs.demo2.disablePullup()
          }, 100)
        }
      }, 2000)
    },
    onsblur(){
      // alert("f")
      this.textactive=true;
    }
  },
  data () {
    return {
      textactive:false, //输入框
      userpl:true,
      headerimgs:"http://img0.imgtn.bdimg.com/it/u=2274961093,3482764833&fm=11&gp=0.jpg",
      h1title:"",
      n2: 10,
      textconte:"总有一个人，一直住在心底，却消失在生活里。 有的时候，明知没有结局的一段感情，却让自己活得那么累，爱得那么辛苦。真的感觉，自己好傻，好傻。有的时候，会因为一个熟悉的背影，着急地穿越人海去寻找，走近了才发现，原来只是自己的一种幻觉。因为爱得太深，才会记得那么深刻。有的时候，好想大醉一场，用酒精来麻痹那些残留下来的伤痛。就这么闭着眼睛，就这么安静地沉睡过去…的时候，连自己都会嘲笑自己，明明很想，却一直拼命地提醒自己，因为知道，不要连最后的那么一点尊严都那么狼狈地被自己踩在脚下沉默是一个女孩最大的哭声。有的时候，忘记了告诉自己，其实不是选择了就没有了退路，而是自己从来不尝试去走出自己限制的界线，忘记自己还有另外的选择。或许，登上下一站，会有另外一番别致的风景等着自己有的时候，总是在逝去的感情徘徊，却没有懂得，爱情是唯一，但爱人并不是唯一的。有的时候，说了再见，可能就再也见不到。一个转身，可能就是一辈子的陌路。　有的时候，会因为一首歌，突然间，很想很想一些人。与爱情无关，只是一种习惯。的时候，需要懂得，有些人，只需埋藏在心底。有些记忆，需要用时间来遗忘。有一种爱情，需要用眼泪来祭奠。有一种友情，需要距离来衡量。 ",
      swcheig:"600px",
      userpllist:[{
        name:"张三",
        imgurl:"http://img0.imgtn.bdimg.com/it/u=2274961093,3482764833&fm=11&gp=0.jpg",
        times:"2017.11.13",
        contens:"真厉害！！"
      },{
        name:"展示",
        imgurl:"http://img0.imgtn.bdimg.com/it/u=2274961093,3482764833&fm=11&gp=0.jpg",
        times:"2017.11.13",
        contens:"It's a new one"
      },{
        name:"展示",
        imgurl:"http://img0.imgtn.bdimg.com/it/u=2274961093,3482764833&fm=11&gp=0.jpg",
        times:"2017.11.13",
        contens:"That's a pretty song. I've never heard it before."
      }],
      pullupConfig2: {
        content: '上拉加载更多',
        downContent: '松开进行加载',
        upContent: '上拉加载更多',
        loadingContent: '加载中...'
      }
    }
  },
  mounted () {
    this.$nextTick(function() {
       this.swcheig=(document.documentElement.clientHeight-50)+"px";
    var _this=this;
    if (this.$route.query.debuge && localStorage.detasdedata ) {
      let objedata=JSON.parse(localStorage.detasdedata);
      // alert(objedata.textconten)
      _this.textconte=objedata.textconten;
      _this.h1title=objedata.h1value
      _this.headerimgs=objedata.imgs;
    }else{
      // alert("f")
    }
   setTimeout(()=>{this.$store.state.isload=false},100)

    })
  }
}
</script>
<style lang="scss" >
.listbox {
// text-align: center;
  .headerimg {
    width: 100%;
    height:180px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .listcontents {
    width: 85%;
    height:auto;
    margin: auto;
    position: relative;
    top: -50px;
    border-radius: 10px;
    padding: 15px;
    background-color: #fff;
    .username {
      padding-top: 10px;
      display: flex;
        .h1title {
          flex:1;
          text-align: left;
          color:#5C616A;
          font-size: 15px;
          font-weight: 600;
        }
        .gz {
           flex:1;
          text-align: right;
          .box {
            background-color: #1488F5;
            color:#fff;
            padding:7px 10px;
            border-radius: 4px;
          }
        }
    }
    .zzname {
      display: flex;
      padding: 15px 0;
      color:#D7DAE0;
      border-bottom: 1px solid #F4F4F4;
    }
    .listcontens {
      color: #72777F;
      padding-top: 20px;
    }
    .bottomtip {
      text-align: center;
      letter-spacing:6px;
      margin-top: 20px;
      .h2titl {
        font-size: 14px;
        color:#333;
        font-weight: 600;
        margin-bottom: 5px;
      }
      .contentitil {
        color:#ccc;
        letter-spacing:4px;
        .active {
          color:#333;
        }
      }
      .userplconten {
        padding-top: 20px;
        .plbox{
          border-bottom: 1px solid #eee;
          padding: 15px 0;
          .topconten {
            display:flex;
            .logoimg {
              flex:1;
              img {
                width: 35px;
                height:35px;
                border-radius: 100%;
              }
            }
            .namesf {
              flex:4;
              text-align: left;
              letter-spacing: 0px;
              color:#777;
              .times {
                color:#777;
              }
              .contens {
                color:#333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
              }
            }

          }
        }
      }

    }
  }
}
.fixedbox {
  position:fixed;
  left:0;
  top: 0;
  width:100%;
  height:100%;
  z-index: 999;
  background-color: rgba(0,0,0,0.5);
  overflow:hidden;
}
.bottomuserpl , .bottomuserplactive{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:50px;
  width:100%;
  background-color: #FAFAFA;
  border-top: 1px solid #e5e5e5;
  z-index: 1000;
  .disflexbox {
    display:flex;
    color:#555;
    font-size: 13px;
    padding: 5px 15px 5px 15px;
    .exit {
      flex:1;
      text-align: left;
    }
    .sumbits{
      flex:1;
      text-align: right;
    }
  }
}
.bottomuserpl {
  box-shadow: 1px 1px 9px #ccc;
    textarea {
      padding-top: 10px ;
     text-overflow:ellipsis;
     white-space:nowrap;
     -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
     overflow:hidden;
    border-radius: 10px;
  }
}
.bottomuserplactive {
  position:fixed;
  bottom:0;
  left:0;
  height:50%;
  width:100%;
  background-color: #fff;
  padding: 10px 0;
}
</style>
